<!-- 模块说明 -->
<template>
  <div>
    <div class="box">
      <el-input v-model="input" placeholder="Id : 查询" />
      <el-button @click="find()" type="primary">确认</el-button>
    </div>
    <el-table border :data="topicData" style="width: 100%">
      <el-table-column label="ID" width="180">
        <template #default="{ row }">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="学科" width="180">
        <template #default="{ row }">
          {{ subjectfn(row) }}
        </template>
      </el-table-column>
      <el-table-column label="题型" width="180">
        <template #default="{ row }">
          {{ questionfn(row) }}
        </template>
      </el-table-column>
      <el-table-column label="题干">
        <template #default="{ row }">
          {{ row.shortTitle }}
        </template>
      </el-table-column>
      <el-table-column label="分数" width="180">
        <template #default="{ row }">
          {{ row.score }}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="180">
        <template #default="{ row }">
          {{ row.difficult }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="{ row }">
          <el-button @click="open(row)">预览</el-button>
          <el-button @click="editFn(row)">编辑</el-button>
          <el-button @click="delFn(row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  getQuestionList,
  delQuestionList,
  findQuestionList,
} from "../../api/question";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
// import { ElMessage, ElMessageBox } from 'element-plus'
const input = ref("");
const router = useRouter();
const store = useStore();
const topicData = ref([]);

// 题目列表
const getTopic = async () => {
  let res = await getQuestionList();
  // console.log(res);
  topicData.value = res.data;
};

const subjectfn = (row: any) => {
  if (row.subjectId == 1) {
    return "语文";
  } else if (row.subjectId == 2) {
    return "数学";
  } else if (row.subjectId == 3) {
    return "英语";
  } else if (row.subjectId == 4) {
    return "自然";
  }
};
const questionfn = (row: any) => {
  if (row.questionType == 1) {
    return "单选题";
  } else if (row.questionType == 2) {
    return "多选题";
  } else if (row.questionType == 3) {
    return "判断题";
  } else if (row.questionType == 4) {
    return "填空题";
  } else if (row.questionType == 5) {
    return "简答题";
  }
};
// 编辑跳转
const editFn = (row: any) => {
  // console.log(row);
  store.commit("topic/SET_PROFILE", row);
  if (row.questionType == 1) {
    router.push({ path: "/topic/radio", query: { id: row.id } });
  } else if (row.questionType == 2) {
    router.push({ path: "/topic/checked", query: { id: row.id } });
  } else if (row.questionType == 3) {
    router.push({ path: "/topic/truefalse", query: { id: row.id } });
  } else if (row.questionType == 4) {
    router.push({ path: "/topic/gapfilling", query: { id: row.id } });
  } else {
    router.push({ path: "/topic/shortanswer", query: { id: row.id } });
  }
};
// 预览打开
const open = (row: any) => {
  ElMessageBox.alert(`${row.correct}`, `${row.shortTitle}`, {
    confirmButtonText: "OK",
  });
};
//删除
const delFn = async (row: any) => {
  await delQuestionList(row.id);
  getTopic();
};
//查找
const find = async () => {
  let res = await findQuestionList({ q: input.value });
  // console.log(res);
  topicData.value = res.data;
};
onMounted(() => {
  getTopic();
});
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  width: 200px;
  margin: 30px;
  .el-button {
    margin-left: 10px;
  }
}
</style>
